<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
      html { height: 100% }
      body { height: 100%; margin: 0; padding: 0 }
      #map_canvas { height: 100% }
    </style>
    <script type="text/javascript"
      src="http://maps.googleapis.com/maps/api/js?key=AIzaSyChRMVAvQo4JIiBdgUJuK609zary5BZAE8&sensor=true">
    </script>
    <script type="text/javascript">
        var map;
        function initialize() {
            var stylesArray = [
  {
      featureType: "administrative",
      stylers: [
      { visibility: "off" }
    ]
  }, {
      featureType: "poi",
      stylers: [
      { visibility: "off" }
    ]
  }, {
      featureType: "road",
      stylers: [
      { visibility: "off" }
    ]
  }, {
      featureType: "transit",
      stylers: [
      { visibility: "off" }
    ]
  }, {
      featureType: "water",
      stylers: [
      { visibility: "on" },
      { invert_lightness: true }
    ]
  }, {
      featureType: "landscape",
      stylers: [
      { invert_lightness: true }
    ]
  }, {
      featureType: "water",
      elementType: "labels",
      stylers: [
      { visibility: "off" }
    ]
  }, {
}
]

            var stylesArray = new google.maps.StyledMapType(stylesArray, { name: "dark" });

            var mapOptions = {
                center: new google.maps.LatLng(45, -122),
                zoom: 3,
                mapTypeControl: false,
                streetViewControl: false,
                mapTypeControlOptions: {
                    mapTypeId: [google.maps.MapTypeId.ROADMAP, 'styles_Array']
                }
            };
            map = new google.maps.Map(document.getElementById("map_canvas"),
            mapOptions);

            map.mapTypes.set('styles_Array', stylesArray);
            map.setMapTypeId('styles_Array');

            var image = 'tweet.png';
            var myLatLng = new google.maps.LatLng(-33.89, 151.27);
            var purpleMarker = new google.maps.Marker({
                position: myLatLng,
                map: map,
                icon: image
            });

        }

        function createMarker(lat, lng) {
            //var myIcon = new google.maps.MarkerOptions;
            var image = 'tweet.png';
            var mylatLng = new google.maps.LatLng(lat, lng);
            var purpleMarker = new google.maps.Marker({
                position: mylatLng,
                map: map,
                icon: image,
                animation: google.maps.Animation.DROP

            });
            markers.push(purpleMarker);

        }

        var markers = [];
        function Coordinate( lat, lng) {
            this.lat = lat;
            this.lng = lng;
        }

        var latLngs = new Array(new Coordinate(45, -122), new Coordinate(45, -120), new Coordinate(45, -118), new Coordinate(45, -116), new Coordinate(45, -114), new Coordinate(45, -112), new Coordinate(45, -110));
        var counter = latLngs.length-1;

           function placeMarkers(latLngs){

           delayInterval = (60000 / latLngs.length);
           var counter = latLngs.length - 1;

           function myLoop() {           //  create a loop function
               setTimeout(function () {    //  call a 3s setTimeout when the loop is called
                    createMarker(latLngs[counter].lat, latLngs[counter].lng);
                    counter=counter-1;
                    if (counter > 0)
                        myLoop();
                    }, delayInterval);                        //  ..  setTimeout()
            }
            myLoop();
        }
        
            
    </script>
  </head>
  <body onload="initialize()">
    <div id="map_canvas" style="width:90%; height:90%"></div>
    <button onclick="createMarker( -40, 140)">
    place
    </button>
    <button onclick="placeMarkers(latLngs)">
    markers
    </button>
  </body>
</html>